<template>
  <!-- 会员状态操作 -->
  <u-dialog :title="title" :show.sync="show" :auto-close="false" :footer="true" width="1080px" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">
      <el-tabs>
        <el-descriptions title="支援时间" :column="2" border >
          <el-descriptions-item label="入职时间">
            {{ dataForm.createTime }}
          </el-descriptions-item>

          <el-descriptions-item label="支援天数">
            {{ dataForm.endDays }}天
          </el-descriptions-item>

          <el-descriptions-item label="新支援天数" :span="2">
            <el-radio-group v-model="dataForm.newDay">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="15">15天</el-radio>
            </el-radio-group>
          </el-descriptions-item>
        </el-descriptions>
      </el-tabs>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 会员状态操作
 */
import region from '@/design/data/region.json'
export default {
  name: 'Edit2',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuide,
      options: region,
      title: '编辑导购',
      dataForm: {},
      rules: {
        remark: [
          { required: true, message: '请输入备注以方便追溯历史原因', trigger: ['blur'] }
        ],
        mobile: [
          {
            validator: this.validateMobile,
            message: '请输入正确的手机号格式',
            trigger: 'blur'
          }
        ],
        emergencyMobile: [
          {
            validator: this.validateMobile,
            message: '请输入正确的手机号格式',
            trigger: 'blur'
          }
        ]
      },
      selectOptions: [{
        value: '亲属',
        label: '亲属'
      },
      {
        value: '朋友',
        label: '朋友'
      },
      {
        value: '同事',
        label: '同事'
      },
      {
        value: '其他',
        label: '其他'
      }]
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        this.dataForm = this.$u.deepClone(this.data)
        // console.log(this.dataForm)
        const { name } = this.dataForm
        this.title = '导购编辑:查询【' + name + '】'
        this.dataForm.region = [this.dataForm.province, this.dataForm.city, this.dataForm.area]
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
        // this.$nextTick(() => {
        //   if (this.$refs.dataForm) {
        //     this.$refs.dataForm.clearValidate()
        //   }
        // })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      // 验证延期天数不能为零天
      if (this.dataForm.newDay === 0) {
        this.$message.error('延期天数不能为零天')
        return
      }
      self.$confirm('此操作将更改 【' + self.dataForm.name + '】 的导购内容，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // 复制一份对象，在修改
            const d = this.$u.deepClone(this.dataForm)
            d.endDays = self.dataForm.newDay
            // 提交更新数据
            self.api.updateExtend(d).then(() => {
              // 通知信息
              self.$u.msg('更改成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      self.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
